<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - OpenOKR</title>
    <meta name="page-title" content="login.title">
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/i18n.js"></script>
    <style>
        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .login-card {
            background: white;
            padding: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
            position: relative;
        }
        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        .login-header h1 {
            font-size: 1.875rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }
        .login-header p {
            color: var(--text-secondary);
        }
        .alert {
            padding: 0.75rem 1rem;
            border-radius: 6px;
            margin-bottom: 1rem;
        }
        .alert-error {
            background-color: #fee2e2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-card">
            <div style="position: absolute; top: 1rem; right: 1rem;">
                <select id="language-selector" onchange="switchLanguage(this.value)" style="background: white; border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.3rem 0.5rem; border-radius: 4px; cursor: pointer;">
                    <option value="zh">中文</option>
                    <option value="en">English</option>
                </select>
            </div>
            <div class="login-header">
                <img src="/static/images/openokr.png" alt="OpenOKR Logo" style="width: 120px; height: auto; margin-bottom: 1rem;">
                <h1 data-i18n="app.name">OpenOKR</h1>
                <p data-i18n="app.subtitle">开放式目标与关键成果管理系统</p>
            </div>

            <div id="error-message" class="alert alert-error" style="display: none;"></div>

            <form id="login-form">
                <div class="form-group">
                    <label class="form-label" for="username" data-i18n="login.username">用户名</label>
                    <input type="text" id="username" name="username" class="form-input" required>
                </div>

                <div class="form-group">
                    <label class="form-label" for="password" data-i18n="login.password">密码</label>
                    <input type="password" id="password" name="password" class="form-input" required>
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%;">
                    <span id="login-text" data-i18n="login.submit">登录</span>
                    <span id="login-loading" class="loading" style="display: none;"></span>
                </button>
            </form>

            <div style="margin-top: 1.5rem; text-align: center; color: var(--text-secondary); font-size: 0.875rem;">
                <p>OPENOKR : ON THE SAME PAGE</p>
            </div>
        </div>
    </div>

    <script>
        // 设置语言选择器的当前值
        document.addEventListener('DOMContentLoaded', () => {
            const savedLang = localStorage.getItem('language') || 'zh';
            document.getElementById('language-selector').value = savedLang;
        });

        document.getElementById('login-form').addEventListener('submit', async (e) => {
            e.preventDefault();

            const errorDiv = document.getElementById('error-message');
            const loginText = document.getElementById('login-text');
            const loginLoading = document.getElementById('login-loading');

            errorDiv.style.display = 'none';
            loginText.style.display = 'none';
            loginLoading.style.display = 'inline-block';

            const formData = {
                username: document.getElementById('username').value,
                password: document.getElementById('password').value
            };

            try {
                const response = await fetch('/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });

                const data = await response.json();

                if (response.ok) {
                    window.location.href = data.redirect || '/auth/dashboard';
                } else {
                    errorDiv.textContent = data.error || '登录失败';
                    errorDiv.style.display = 'block';
                }
            } catch (error) {
                errorDiv.textContent = '网络错误,请稍后重试';
                errorDiv.style.display = 'block';
            } finally {
                loginText.style.display = 'inline';
                loginLoading.style.display = 'none';
            }
        });
    </script>
</body>
</html>